<template>
    <div>
        <Card>
            <p slot="title">
                添加用户
            </p>
            <div>
                <Form class="step-form" ref="bannerData" :model="bannerData" :rules="bannerDataRules" :label-width="100">
                    <Row span="12">
                        <i-col span="12" >
                            <FormItem label="轮播图标题：" prop="img_title" label-position="left" :label-width="150">
                                <Input :disabled="hasSubmit" v-model="bannerData.img_title" type="text" placeholder="请输入轮播图标题" />
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="12">
                        <i-col span="12" >
                            <FormItem label="跳转路径："  prop="img_link" label-position="left" :label-width="150">
                                <Input :disabled="hasSubmit" v-model="bannerData.img_link" type="text" placeholder="请输入轮播图的跳转路径" />
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="12">
                        <i-col span="12" >
                            <FormItem label="是否跳转：" prop="skip_type" label-position="left" :label-width="150">
                               <Radio-group v-model="bannerData.skip_type">
                                    <Radio :label="0">不跳转</Radio>
                                    <Radio :label="1">跳转H5</Radio>
                                    <Radio :label="2">跳转原生</Radio>
                                </Radio-group>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="12">
                        <i-col span="12" >
                            <FormItem label="是否启用：" prop="is_enable" label-position="left" :label-width="150">
                               <Radio-group v-model="bannerData.is_enable">
                                    <Radio :label="0">未启用</Radio>
                                    <Radio :label="1">启用</Radio>
                                </Radio-group>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="12">
                        <i-col span="12" >
                            <FormItem label="轮播图类型：" prop="type" label-position="left" :label-width="150">
                               <Radio-group v-model="bannerData.type">
                                    <Radio :label="1">banner图</Radio>
                                    <Radio :label="2">广告位</Radio>
                                </Radio-group>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="12">
                        <i-col span="12" >
                            <FormItem label="轮播顺序：" prop="num" label-position="left" :label-width="150">
                                <Input-number :max="9999" :min="1" v-model="bannerData.num"></Input-number>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="12">
                        <i-col span="12" >
                            <FormItem label="信息描述：" prop="" label-position="left" :label-width="150">
                               <Input :maxlength="100" v-model="bannerData.describeinfo" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row span="12">
                        <i-col span="10">
                            <FormItem label="轮播图片：" prop="img_url" label-position="left" :label-width="150">
                                <img v-if="bannerData.img_url !== ''" :src="bannerData.img_url" height="200" width="200">
                            </FormItem>
                        </i-col>
                        <i-col span="1">
                            <Upload
                                :show-upload-list="false"
                                :before-upload="handleUpload"
                                action="//jsonplaceholder.typicode.com/posts/">
                                <Button>上传</Button>
                            </Upload>
                        </i-col>
                    </Row>
                    <FormItem >
                        <Button :disabled="hasSubmit" @click="saveData" style="width:100px;" type="primary">提交</Button>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <Button :disabled="hasSubmit" @click="goBack" style="width:100px;" >返回</Button>
                    </FormItem>
                </Form>
            </div>
        </Card>
    </div>
</template>

<script>
import ajax from '../../../libs/axios.js'
export default {
    name: 'addUser',
    data () {
        return {
            hasSubmit: false,     // 不可点击 / 可点击状态
            // 图片上传
            file: null,
            status: 'wait',
            bannerData: {
                img_title:'',     // 轮播图标题
                img_link:'',      // 跳转路径
                skip_type:1,      // 是否跳转
                is_enable:0,      // 是否启用
                img_url: '',      // 轮播图片
                num:1,            // 轮播顺序
                type:1,
                describeinfo:''   // 信息描述

            },
            bannerDataRules: {
                img_title: [
                    { required: true, message: '请输入轮播图标题', trigger: 'blur'},
                    {type: 'string', max: 15, message: '不能超过15个字符', trigger: 'blur'}
                ]
                // img_link: [
                //     { required: true, message: '请设置跳转路径', trigger: 'blur'}
                // ]
                // 暂时不进行验证
                // imgUrl: [
                //     { required: true, message: '请上传疾病图片', trigger: 'blur'},
                // ]

            },
        }
    },
    created () {
        //this.init()
    },
    activated () {
        //this.init()
    },
    methods: {
        // 数据初始化
        init () {
            this.$store.commit('setActiveName', 'bannerindex');
        },
        // 身份证图片上传
        handleUpload (file) {
            this.uploadType = 1
            this.file = file
            this.upload()
            return false;
        },
        // 上传图片
        upload () {
            let that = this
            let fileName = that.file.name
            //FormData 对象
            let formData = new FormData()
            console.log(fileName)
            this.uploadLoading = true
            // 文件对象
            formData.append("img", that.file)
            formData.append("type", "banner")
            ajax.upload('adminlogin/file/uploadOssImage',formData).then(function (res) {
                if(that.uploadType == 1){
                    setTimeout(() => {
                        that.bannerData.img_url = res.url
                        that.file = ''
                        that.$Message.success('上传成功')
                    }, 500);
                }else{
                     that.$Message.success('上传失败，没有该类型数据')
                }
                //that.uploadLoading = false
            }, function (err) {
                console.log(err)
                //this.uploadLoading = false
            }).catch(function (error) {
                console.log(error)
                //this.uploadLoading = false
            })
        },
        // 添加数据
        saveData () {
            let that = this
            that.$refs['bannerData'].validate((valid) => {
                if (valid) {
                    that.hasSubmit = true
                    let url = 'adminlogin/banner/addCjAppBanner'
                    let data = that.bannerData
                    ajax.formRes(url, data).then(res => {
                        // success
                        that.$Message.success('新增数据成功,页面正在跳转')
                        that.hasSubmit = false
                            let argu = {
                            }
                            that.$router.push({
                                name: 'bannerindex',
                                params: argu
                            })
                    }).catch(err => {
                        console.log('有错误信息')
                    })
                } else {
                    console.log('新增失败。。。')
                }
            })
        },
        // 返回列表
        goBack () {
            this.$router.push({
                name: 'bannerindex'
            })
        },

    },
}
</script>
<style>
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .card-upload:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
        height: 100px;
        position: relative;
        border: 1px solid #eee;
    }
</style>

